import React, { useState } from 'react';
import TableRender from '@/components/TableRender';
import ContractDetail from './ContractDetail';
import { formatAmount } from '@/utils/utils.jsx';
import { contractDetail } from '../service';

const statusMap = {
  2: '生效中',
  1: '待审核',
  4: '已终止',
  3: '未通过',
};

const ContractTable = ({
  data,
  pages,
  setPages,
  headerHeight,
  handleClickStop,
  showApplyPeriodModal,
  setRecordData,
}) => {
  //查看详情
  const [detailVisible, setDetailVisible] = useState(false);

  //详情数据
  const [detailData, setDetailData] = useState({});

  const columns = [
    {
      title: '序号',
      code: 'index',
      width: 60,
      render: (t, r, i) => i + 1,
    },
    {
      title: '合同编号',
      code: 'contractNo',
      width: 200,
    },
    {
      title: '供应商',
      code: 'storeName',
      width: 100,
    },
    {
      title: '授信额度',
      code: 'quota',
      width: 100,
      render: (text) => (text ? formatAmount(text) : 0),
    },
    {
      title: '账期天数',
      code: 'timePeriod',
      width: 90,
    },
    {
      title: '申请时间',
      code: 'applyTime',
      width: 150,
    },
    {
      title: '审核时间',
      code: 'auditTime',
      width: 150,
    },
    {
      title: '状态',
      code: 'status',
      width: 80,
      render: (text) => {
        return <span>{statusMap[text]}</span>;
      },
    },

    {
      title: '操作',
      width: 180,
      render: (text, record) => {
        return (
          <span className="opera-span-common">
            <span
              onClick={() => getDetail(record.contractId)}
              className="common-color1"
            >
              查看详情
            </span>
            {record.status == '2' ? (
              <>
                <i>|</i>
                <span
                  onClick={() => handleClickStop(record)}
                  className="common-color1"
                >
                  终止
                </span>
              </>
            ) : (
              ''
            )}
            {record.status == '3' ? (
              <>
                <i>|</i>
                <span onClick={() => reApply(record)} className="common-color1">
                  重新申请
                </span>
              </>
            ) : (
              ''
            )}
          </span>
        );
      },
    },
  ];

  //获取合同详情
  const getDetail = async (contractId) => {
    START_LOADING();
    setDetailVisible(true);
    setDetailData({});
    const { success, data = {} } = await contractDetail({
      contractId,
    });
    if (success) {
      setDetailData(data);
    }
    END_LOADING();
  };

  //重新申请的操作
  const reApply = (record) => {
    showApplyPeriodModal();
    setRecordData(record);
  };

  //表格组件
  const TableRenderProps = {
    data,
    columns,
    rowKey: 'contractId',
    style: {
      height: `calc(100vh - ${headerHeight + 270}px)`
    },
    pageConfig: {
      pages,
      handlePageSize(page, size) {
        setPages({
          ...pages,
          current: page,
          pageSize: size
        });
      }
    }
  }

  //查看详情弹窗数据
  const detailProps = {
    detailVisible,
    detailData,
    handleCancel() {
      setDetailVisible(false);
    },
  };

  return (
    <>
      <TableRender {...TableRenderProps} />
      <ContractDetail {...detailProps} />
    </>
  );
};

export default ContractTable;
